<template>
  <div>
    <el-card class="box-card card-chebox">
      <div slot="header" class="clearfix">
        <el-upload
          class="upload-demo"
          action="/lejuAdmin/material/uploadFileOssSave"
          :headers="headers"
          :on-success="handleChange"
          ref="lim"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </div>
      <div class="card_inner">
        <el-card
          class="box-card card-list"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="list-time">{{ item.modifyTime }}</div>
          <div class="list-img">
            <img :src="item.ossUrl" alt="" />
            <div class="reach">
              <el-button
                type="danger"
                size="small"
                class="list-btn"
                @click="delimg(item.id)"
                >删除</el-button
              >
            </div>
          </div>
        </el-card>
      </div>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="caruet.start"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="caruet.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script >
import { findMaterialByPage, delMaterial } from "@/api/content/index";
import { getToken } from "@/utils/myAuth";
export default {
  data() {
    return {
      list: [],
      caruet: {
        start: 1,
        limit: 10
      },
      fileList: [],
      total: 0
    }
  },
  created() {
    this.findMaterialByPageAPI();
  },
  components: {

  },

  computed: {
    headers() {
      return { token: getToken() };
    }
  },

  mounted() {},

  methods: {
    
    handleSizeChange(val) {
      var _this = this;
      this.caruet.limit = val;
      this.findMaterialByPageAPI();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      var _this = this;
      
      this.caruet.start = val;
this.findMaterialByPageAPI();
      console.log(`当前页: ${val}`);
    },
    handleChange(file, fileList) {
      var _this = this;
      console.log(file);
      if (file.code == 20000) {
        this.$message.success("上传成功");
        this.findMaterialByPageAPI();
        this.$refs.lim.clearFiles();
      } else {
        this.$message.error("对不起选择失败请重新上传");
      }
      console.log(file.data.fileUrl, "file");
    },

    findMaterialByPageAPI() {
      var _this = this;
      findMaterialByPage(this.caruet.start, this.caruet.limit).then((res) => {
        console.log(res.data);
        _this.list = res.data.rows;
        _this.total = res.data.total;
      });
    },
    delimg(el) {
      delMaterial(el).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message.success("删除成功")
          this.findMaterialByPageAPI()
        } else {
          this.$message.error("删除失败")
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.card_inner {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.card-chebox {
  width: 100%;
}
.card-list {
  width: 20%;
  .list-time {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .list-img {
    padding: 20px;
    img {
      width: 100%;
      height: 250px;
    }
    .reach {
      width: 100%;
      height: 48px;
      display: flex;
      flex-direction: row-reverse;
      .list-btn {
        width: 90px;
        margin-top: 20px;
      }
    }
  }
}
</style>